﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WordValid.aspx.cs" Inherits="NX5Web.admin.BaseData.WordValid" %>


<style>
    .scard{ 
        border-bottom: 1px solid rgb(119, 119, 119);  
        padding: 20px; 
        align-items: center;
        display:flex;
    }
     .lwords{
         border: 1px dotted #777;margin: 5px;border-radius: 5px;font-size: 14px;
     }

     .rdic{
             min-height: 30px;
        line-height: 30px;
        display:flex;
     }

     .ltxt{
            border-bottom: 1px dotted;
         width:80px;
         text-align:center;
     }

     .rcontent{
         flex:1;
             border-bottom: 1px dotted;
     }

     .passed{
         background-color:#67c23a;
         color:#fff;
     }

     .fault{
         background-color:#b8272c;
         color:#fff;
     }

     .el-badge__content.is-fixed{
         right: 33px;
        top: 10px;
     }

     .wordcard{
         position:relative;
        width: 250px;
        border-bottom: 1px solid #777;
        min-height: 100px;
        margin: 6px;
        font-size: 14px;
        text-align: center;
     }
</style>

<div id="subApp" style="display:flex;"> 


      <el-dialog v-model="dialogBook" title="导入书籍" width="900" >
  <div>
      <el-form label-width="auto" style="width:100%;">  
          <el-form-item label="书籍">
            <el-cascader :options="options" :props="props" v-model="importedbks" clearable style="width:100%;"></el-cascader>
          </el-form-item>  
          <el-form-item label="阶段"> 
              <el-select v-model="importTarget" placeholder="将选中的书导入到次阶段">
                  <el-option label="学龄前" value="1"></el-option>
                  <el-option label="小学" value="2" ></el-option>
                  <el-option label="初中" value="3" ></el-option>
                  <el-option label="高中" value="4" ></el-option>
                  <el-option label="大学" value="5" ></el-option>
                  <el-option label="成人" value="6" ></el-option>
                  <el-option label="其他" value="7" ></el-option>
              </el-select>
        </el-form-item>  
      </el-form>
  </div>
  <template #footer>
    <div class="dialog-footer">
      <el-button @click="dialogBook = false">取 消</el-button>
      <el-button type="primary" @click="AddBookToNX5()">
        确 定
      </el-button>
    </div>
  </template>
</el-dialog>



    <div style="flex:2">
        <div class="leftTitle">
            <span><%= Request.QueryString["title"] %></span>
            &nbsp;&nbsp;<el-link type="primary" @click="importbooks()">导入</el-link>
        </div>
        <el-menu 
            @open="handleOpen"
            @close="handleClose"
            style="height: calc(100vh - 96px);overflow: scroll;"
          >
            <el-sub-menu v-for="(lv1,lv1index) in BookList" :index="lv1.Title">
              <template #title>
                <el-icon><location /></el-icon>
                <span>{{lv1.Title}}</span>
              </template> 
              <el-sub-menu v-for="(lv2,lv2index) in lv1.items" :index="lv1.Title+'-'+lv2.GroupName">
                <template #title>{{lv2.GroupName}}</template>
                <el-menu-item @click="loadUnit(lv3)" v-for="(lv3,lv3index) in lv2.items" :index="lv1.Title+'-'+lv2.GroupName+'-'+lv3.BookName">
                    <el-icon v-if="lv3.Valid" style="color:#67c23a;"><Bell /></el-icon>
                    <el-icon v-else style="color:#b8272c;"><Bell /></el-icon>  
                    <span>{{lv3.BookName}}</span>

                </el-menu-item>
              </el-sub-menu>
            </el-sub-menu> 
          </el-menu>
    </div>
    <div style="flex:10;height: calc(100vh - 60px);overflow: scroll; position:relative;" id="righbar">
        <div style="    position: fixed;right: 30px;bottom: 80px;z-index: 9;background-color: green;color: #fff;padding: 14px 10px;border-radius: 50%;">
            <a href="javascript:document.getElementById('righbar').scrollTo(0, 0);" style="color:#fff">↑UP</a>
        </div>
        <div  v-show="ActiveUnit>0">
            <div style="margin:15px;">
                <div v-if="ActiveBook" @blur="changeBookTitle($event)" contenteditable v-html="ActiveBook.BookName"></div>
                <div style="border-bottom: 1px solid;">
                     <el-badge v-for="(item,index) in UnitList" :value="item.UnConfig" class="badgeitem" :type="(item.UnConfig==0&&item.UnAudit==0)?'success':'danger'" >
                        <el-button @click="changeUnit(item)" :type="item.Unit==ActiveUnit?'primary':'info'" style="margin: 10px;">Unit {{item.Unit}}</el-button> 
                    </el-badge> 
                </div>
                <div style="display:flex; margin-top:10px;flex-wrap: wrap; border-bottom:1px solid #777; padding-bottom:15px;" v-for="(item,index) in WordList">
                    <div style="flex:3; position:relative; text-align:center">
                        <div v-if="item.NeedWrite" style="position:absolute; top:5px; left:3px;">
                            <img src="/images/needwrite.png" style="height: 20px;" />
                        </div>
                        <div>{{item.Word}}</div>
                        <div>{{item.PS}}</div>
                        <div>
                            <span>{{item.Mean}}</span> 
                        </div>
                        <div>{{(item.Syllable == null || item.Syllable.length == 0) ? '未分音节':item.Syllable}}</div>
                        <div><span style="font-size:12px;color:#777;">必写 </span><el-switch v-model="item.NeedWrite" @change="changewrite(item)" class="ml-2" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" /></div>
                    </div>
                    <div style="flex:19">  
                        <div v-for="(m,mi) in item.Methods">
                            <div style="display:flex;">
                                <el-tag type="primary" effect="dark">{{m.Method}}</el-tag> 
                            </div>
                            <div>
                                {{m.Detail}}
                            </div> 
                        </div>
                    </div> 
                </div> 
            </div> 
        </div> 
    </div>
</div>


<script>
    var subApp = createApp({
        el: '#subApp',
        data() {
            return { 
                BookList: [],
                UnitList: [],
                WordList: [], 
                ActiveUnit: 0,
                ActiveBook: null, 
                form: {
                    "LCType": "",
                    "LCStruct": "",
                    "LCTarget": "",
                    "Words": []
                },
                props: { multiple: true },  
                dialogVisible: false,
                dialogVisibleAddWord: false,
                dialogBook:false,
                editSentence: null,
                importTarget:null,
            };
        },
        computed: {   
        }, 
        methods: {   
            changewrite(item) {
                loaddingPlus(true);
                ktlapi({
                    "action": "Cus_ChangeWordWrite",
                    "data": {
                        "ID": item.ID,
                        "NeedWrite": (item.NeedWrite ? 1 : 0)
                    }
                }).then(res => {
                    loaddingPlus(false);
                });
            },
            importbooks() {
                loaddingPlus(true);
                ktlapi({
                    "action": "SDE_GetOrgBooks",
                    "data": {}
                }).then(res => {
                    this.dialogBook = true;

                    this.options = pivotJson(res.data, "GroupName", ["ID", "Cus_BookId", "GroupName", "GroupDetail", "VersionName"]);
                    for (var i = 0; i < this.options.length; i++) {
                        this.options[i]["value"] = this.options[i]["GroupName"];
                        this.options[i]["label"] = this.options[i]["GroupName"];
                        this.options[i].children = pivotJson(this.options[i].items, "GroupDetail", ["ID", "Cus_BookId", "GroupName", "GroupDetail", "VersionName"]);

                        for (var j = 0; j < this.options[i].children.length; j++) {
                            this.options[i].children[j]["value"] = this.options[i].children[j]["GroupDetail"]
                            this.options[i].children[j]["label"] = this.options[i].children[j]["GroupDetail"]
                            this.options[i].children[j].children = this.options[i].children[j].items;

                            for (var k = 0; k < this.options[i].children[j].children.length; k++) {
                                this.options[i].children[j].children[k]["value"] = this.options[i].children[j].children[k]["ID"];
                                this.options[i].children[j].children[k]["label"] = this.options[i].children[j].children[k]["VersionName"]
                                if (this.options[i].children[j].children[k]["Cus_BookId"] != null) {
                                    this.options[i].children[j].children[k].disabled = true;
                                }
                            }
                        }

                    }
                    //console.log(this.options);

                    loaddingPlus(false);
                });
            },
            AddBookToNX5() {
                //console.log(this.importedbks);
                if (this.importTarget == null) {
                    MsgBox.error("未选择阶段");
                    return;
                }
                if (this.importedbks.length == 0) {
                    MsgBox.error("未选择内容");
                    return;
                }
                loaddingPlus(true);

                var data = [];
                for (var i = 0; i < this.importedbks.length; i++) {
                    data.push({ "SDEBookId": this.importedbks[i][2], "TargetLv": this.importTarget })
                }
                //console.log(data);
                ktlapi({
                    "apiurl": OT.CommandAddSet,
                    "action": "Cus_ImportBookFromSDE",
                    "data": data
                }).then(res => {
                    this.dialogBook = false;
                    this.importedbks = [];
                    this.importTarget = null;
                    this.init();
                    loaddingPlus(false);
                });
            },
            playvideo(item) {
                var audio = new Audio(item.MP3);
                audio.play();
            },   
            loadWords() {
                loaddingPlus(true);
                ktlapi({
                    "action": "Cus_LoadUnitWords",
                    "data": {
                        "BookId": this.ActiveBook.BookId,
                        "UnitID": this.ActiveUnit
                    }
                }).then(res => {
                    if (res.data == null) {
                        MsgBox.error("没有发现单词");
                    }
                    this.WordList = res.data;
                    for (var i = 0; i < this.WordList.length; i++) {
                        if (this.WordList[i]["Methods"] != null) {
                            try {
                                this.WordList[i]["Methods"] = JSON.parse(this.WordList[i]["Methods"]);
                            } catch (e) {
                                console.log(this.WordList[i]["Methods"])
                                this.WordList[i]["Methods"] = [];
                            }
                        } else {
                            this.WordList[i]["Methods"] = [];
                        }
                    }
                    loaddingPlus(false);
                }) 
            },
            changeUnit(item) {
                this.ActiveUnit = item.Unit;
                this.loadWords();
            },
            handleOpen(key, keyPath) {

            },
            handleClose(key, keyPath) {

            }, 
            loadUnit(item) {
                console.log("loadUnit", item);
                this.ActiveBook = item; 
                this.WordList = [];
                this.SentenceList = [];
                this.UnitList = [];
                this.ActiveUnit = 0; 
                loaddingPlus(true);
                ktlapi({
                    "action": "Cus_GetBookUnitsVal",
                    "data": { "BookId": item.BookId }
                }).then(res => {
                    if (res.data == null) {
                        MsgBox.error("没有发现单词");
                    }
                    this.UnitList = res.data;
                    console.log(this.UnitList);
                    if (this.UnitList.length > 0) {
                        this.ActiveUnit = this.UnitList[0]["Unit"];
                        this.changeUnit(this.UnitList[0]);
                    }
                    loaddingPlus(false);
                }) 
            }, 
            init() {
                this.BookList = [];
                this.WordList = [];
                this.SentenceList = [];
                this.UnitList = [];
                this.ActiveUnit = 0; 
                loaddingPlus(true); 
                ktlapi({ 
                    "action": "Cus_GetAllBookData",
                    "data": {}
                }).then(res => { 
                    loaddingPlus(false); 
                    if (res.data == null) {
                        return;
                    }
                    this.BookList = pivotJson(res.data, "Title", ["BookId", "BookName", "GroupName", "Title", "UseGrade","Valid"]);
                    
                    for (var i = 0; i < this.BookList.length; i++) {
                        this.BookList[i]["items"] = pivotJson(this.BookList[i]["items"], "GroupName", ["BookId", "BookName", "GroupName", "Title", "UseGrade", "Valid"]);
                    }
                    //console.log(this.BookList);
                    
                }) 
            }
        },
        mounted: function () {
            this.init();
        }
    });
</script>